<template>
	<view class="featured-item" @click="todetail">
	  <view class="featured-image"></view>
	  <view class="item-info">
	    <h3 class="item-title">{{obj.title}}</h3>
	    <text class="views-count">{{obj.views || Math.floor(Math.random()*50) }}人关注</text>
		<text class="summary">{{obj.summary}}</text>
	  </view>
	</view>
</template>

<script>
	export default{
		name:"zhuanjing",
		props:{
			obj:{
				default:null,
				type:Object
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			todetail(){
				uni.navigateTo({
					url:"/pages/router/detail/detail"
				})
				setTimeout(()=>{
					uni.$emit("todetail",{obj:this.$props.obj})
				},1000)
			}
		},
		mounted() {
		
		}
	}
</script>

<style>
	.featured-item {
	  background: #fff;
	  border-radius: 12px;
	  overflow: hidden;
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	  transition: all .3s;
	  display: flex;
	}
	
	.featured-item:active{
		transform: translateY(-4px) scale(0.95);
		filter: brightness(0.9);
	    box-shadow: 0 4px 12px rgba(255 255, 255, 1);
	}
	
	.featured-image {
	  width: 120px;
	  height: 120px;
	  /* background: linear-gradient(45deg, #00b09b, #96c93d); */
	  background-color: #677d79;
	  flex-shrink: 0;
	  border-radius: 5px;
	}
	
	.item-info {
	  padding: 15px;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	
	.views-count {
	  font-size: 12px;
	  color: #6c757d;
	  margin-bottom: 5px;
	}
	
	.item-title {
	  font-size: 16px;
	  font-weight: 600;
	  margin: 0;
	  max-width: 200px;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	.summary{
		max-width: 240px;
		max-height: 82px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>